<template>
  <div>
    <div>{{ state }}</div>
    <button @click="fn">点击</button>
  </div>
</template>
<script>
import { reactive, ref, toRef, toRefs } from "vue";
export default {
  setup() {
    let obj = {
      name: "zs",
      age: 14,
    };
    // const state = ref(obj.name);//通过这种方式进行改变只改变了state的值  obj中的那么值并未被改变 不会影响原始数据 相当于简单数据类型的赋值 ui界面会被改变
    // function fn() {
    //   state.value = "lisi";
    // console.log(state);
    //   console.log(obj);
    // }
    const state = toRef(obj, "name"); //通过这种方式进行改变只改变了state的值  会影响原始obj的数据 如果响应式数据通过toRef进行创建 ui界面不会被改变
    // const state = toRefs(obj);将obj全部转换为toRef类型

    function fn() {
      state.value = "lisi";
      console.log(state);
      console.log(obj);
    }
    return {
      state,
      fn,
    };
  },
};
</script>
